<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
    <title>Title</title>
    <link rel="stylesheet" href="{{ url_for('static',filename='layui/css/layui.css') }}">
    <script src="{{ url_for('static',filename='jquery/jquery-3.5.1.min.js') }}"></script>
    <script type="text/javascript" src="{{ url_for('static',filename='echarts/echarts.min.js') }}"></script>
    <script>
        $(function () {//jquery启动函数
            bar()
            pie()
        })

        function pie() {
            $.ajax({
                url:"getUnivTagsDataForPie",
                method:"get",
                success:function (result){
                    var jsonObj=JSON.parse(result);
                    var pie = echarts.init(document.getElementById('pie'))
            option = {
                tooltip: {
                    trigger: 'item'
                },
                legend: {
                    top: '5%',
                    left: 'center'
                },
                series: [
                    {
                        name: '统计高校类别数量',
                        type: 'pie',
                        radius: ['40%', '70%'],
                        avoidLabelOverlap: false,
                        itemStyle: {
                            borderRadius: 10,
                            borderColor: '#fff',
                            borderWidth: 2
                        },
                        label: {
                            show: true,
                            position: 'center'
                        },
                        emphasis: {
                            label: {
                                show: true,
                                fontSize: '40',
                                fontWeight: 'bold'
                            }
                        },
                        labelLine: {
                            show: true
                        },
                        data: jsonObj
                    }
                ]
            };
            pie.setOption(option);
                },
                error:function (e){
                    layer.msg("请求服务器失败");
                }
            });

        }

        function bar() {
            $.ajax({
                url: "/getUserDataForBar",
                method: "get",
                success: function (result) {
                    jsonObj = JSON.parse(result)
                    var list1 = jsonObj["enable"]
                    var list2 = jsonObj["count"]
                    var bar = echarts.init(document.getElementById('bar'))
                    // 指定图表的配置项和数据
                    var option = {
                        title: {
                            text: '显示2020年高校排名'
                        },
                        tooltip: {},
                        legend: {
                            data: ['名称']
                        },
                        xAxis: {
                            data: list1
                        },
                        yAxis: {},
                        series: [{
                            name: '名次',
                            type: 'bar',
                            data: list2
                        }]
                    };
                    bar.setOption(option);
                },
                error: function (e) {
                    layer.msg("请求服务器失败!")
                }
            });


        }

    </script>
</head>
<body>
<div class="layui-elem-quote">
    欢迎页
</div>
<div class="layui-breadcrumb">
    <a href="#">首页</a>
    <a href="#" class="layui-this">欢迎页</a>
</div>
<div class="">
    <div class="layui-row layui-col-space4">
        <div class="layui-col-xs6">
            <div class="layui-card">
                <div class="layui-card-header layui-bg-blue">柱状图</div>
                <div class="layui-card-body">
                    <div id="bar" style="width: 100%;height: 300px"></div>
                </div>
            </div>
        </div>
        <div class="layui-col-xs6">
            <div class="layui-card">
                <div class="layui-card-header layui-bg-blue">雷达图</div>
                <div class="layui-card-body">
                    <div id="pie" style="width: 100%;height: 300px"></div>
                </div>
            </div>
        </div>
    </div>
    <div class="layui-row layui-col-space4">
        <div class="layui-col-xs8">
            <div class="layui-card">
                <div class="layui-card-header layui-bg-blue">
                    柱状图
                </div>
                <div class="layui-card-body">
                    <div style="width: 100%;height: 300px"></div>
                </div>
            </div>
        </div>
        <div class="layui-col-xs4">
            <div class="layui-card">
                <div class="layui-card-header layui-bg-blue">折线图</div>
                <div class="layui-card-body">
                    <div style="width: 100%;height: 300px"></div>
                </div>
            </div>
        </div>
    </div>
</div>
<script src="{{ url_for('static',filename='layui/layui.js') }}"></script>
<script>
    //JavaScript代码区域
    layui.use('element', function () {
        var element = layui.element;

    });
</script>
</body>
</html>